<template>
  <div class="hello">
    <div class="header">
			<router-link to="/" class="logo-link">
				<img src="../assets/logo-bilibili.png"/>
			</router-link>
    	<div class="search-wrap">
    		<svg class="index__icon__src-commonComponent-topArea-" aria-hidden="true"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-sousuo"></use></svg>
    	</div>
    	<router-link to="/space" class="user-wrap"></router-link>
    	<div class="down-link">
    		<span>下载   App</span>
    	</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'bHeader',
  data () {
    return {
    	
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
	.header{
		position: fixed;
		top: 0;
		display: flex;
		box-sizing: border-box;
		justify-content: space-between;
		align-items: center;
		padding: 3%;
		width: 100%;
		height: 64px;
		background: #fff;
		z-index: 20;
	}
	.logo-link{
		display: block;
		width: 20%;
		height:34px;
		margin-left: 2%;
		img{
	    display: block;
	    width: 100%;
	    margin: 0;
		}
	}
	.search-wrap{
		margin-left: auto;
    display: block;
    width: 21px;
    height: 21px;
    margin-right: 20px;
    color: hsla(0,0%,100%,0);
    svg{
	    display: block;
	    width: 100%;
	    height: 100%;
	    fill: #aaa;
    }
	}
	.user-wrap{
		display: block;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    border-radius: 50%;
    background: url(../assets/noface.gif) no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
	}
	.down-link{
		display: block;
    margin-right: 2%;
    width: 22%;
    height: 26px;
    text-align: center;
    border: 1px solid #fb7299;
    border-radius: 5px;
    background-color: #fb7299;
    span{
    	font-size: 12px;
	    line-height:26px;
	    color: #fff;
    }
	}
</style>
